<template>
<div class="follows-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="" left-arrow @click-left="$router.back()">
        <template #title>
            <div class="tab-header">
                <div class="tab-item" @click="$router.push('/follows/mutual')">
                    互相关注
                </div>
                <div class="tab-item active">
                    关注
                </div>
                <div class="tab-item" @click="$router.push('/follows/followers')">
                    粉丝
                </div>
                <div class="tab-item" @click="$router.push('/follows/recommend')">
                    推荐
                </div>
            </div>
        </template>
    </van-nav-bar>

    <!-- 搜索框 -->
    <div class="search-box">
        <van-search v-model="searchText" placeholder="搜索已关注的人" shape="round" background="#f7f8fa" />
    </div>

    <!-- 分类筛选 -->
    <div class="filter-tabs">
        <div class="filter-header">
            <div class="filter-left">
                <div class="filter-item" :class="{ active: activeFilter === 'all' }" @click="setFilter('all')">
                    全部
                </div>
                <div class="filter-item" :class="{ active: activeFilter === 'business' }"
                    @click="setFilter('business')">
                    商家
                </div>
            </div>
            <div class="filter-right">
                <span>我的关注 ({{ followingList.length }})</span>
                <van-icon name="arrow-down" size="14" />
            </div>
        </div>
    </div>

    <!-- 关注列表 -->
    <div class="follows-list">
        <div v-for="(user, index) in filteredList" :key="index" class="follow-item">
            <div class="user-avatar" @click="goToUserProfile(user.userId)">
                <img :src="user.avatar" alt="avatar" />
            </div>
            <div class="user-info" @click="goToUserProfile(user.userId)">
                <div class="user-name">{{ user.nickname }}</div>
                <div class="user-desc">{{ user.description || '这个人很懒，什么都没写~' }}</div>
                <div class="user-stats" v-if="user.stats">
                    <span>笔记 {{ user.stats.posts }}</span>
                    <span class="stat-divider">|</span>
                    <span>粉丝 {{ user.stats.followers }}</span>
                </div>
            </div>
            <div class="follow-action">
                <van-button size="small" :type="user.isFollowed ? 'default' : 'primary'" round
                    :class="{ 'followed-btn': user.isFollowed, 'follow-btn': !user.isFollowed }"
                    @click="toggleFollow(user)">
                    {{ user.isFollowed ? '已关注' : '关注' }}
                </van-button>
            </div>
        </div>

        <!-- 加载更多 -->
        <div class="load-more" v-if="hasMore">
            <van-loading size="24px" type="spinner">加载中...</van-loading>
        </div>

        <!-- 无数据提示 -->
        <div class="empty-list" v-if="filteredList.length === 0">
            <van-empty description="暂无关注" />
        </div>
    </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'FollowingPage',
    data() {
        return {
            searchText: '',
            activeFilter: 'all',
            followingList: [],
            loading: false,
            hasMore: false,
            page: 1,
            pageSize: 10
        }
    },
    computed: {
        ...mapGetters(['followedUsers']),
        filteredList() {
            let list = this.followingList

            // 搜索过滤
            if (this.searchText) {
                const keyword = this.searchText.toLowerCase()
                list = list.filter(user =>
                    user.nickname.toLowerCase().includes(keyword) ||
                    (user.description && user.description.toLowerCase().includes(keyword))
                )
            }

            // 分类过滤
            if (this.activeFilter === 'business') {
                list = list.filter(user => user.isBusiness)
            }

            return list
        }
    },
    created() {
        this.fetchFollowingList()
    },
    methods: {
        // 获取关注列表
        async fetchFollowingList() {
            try {
                this.loading = true

                // 模拟API调用
                setTimeout(() => {
                    // 模拟数据
                    const mockData = [
                        {
                            userId: '101',
                            nickname: '是魔王哒～流光卡片',
                            avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                            description: '2篇笔记未看',
                            isFollowed: true,
                            isBusiness: false,
                            stats: {
                                posts: 42,
                                followers: 1256
                            }
                        },
                        {
                            userId: '102',
                            nickname: 'momo',
                            avatar: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
                            description: '眼睛到不了的地方，文字可以。',
                            isFollowed: false,
                            isBusiness: false,
                            stats: {
                                posts: 78,
                                followers: 3452
                            }
                        },
                        {
                            userId: '103',
                            nickname: '舟莫UI设计（接稿）',
                            avatar: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
                            description: '🔍 独立 UI/UX 设计师，离开大厂的设计师',
                            isFollowed: true,
                            isBusiness: true,
                            stats: {
                                posts: 156,
                                followers: 8765
                            }
                        },
                        {
                            userId: '104',
                            nickname: 'ai吖蔡蔡',
                            avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                            description: '2篇笔记未看',
                            isFollowed: true,
                            isBusiness: false,
                            stats: {
                                posts: 32,
                                followers: 987
                            }
                        },
                        {
                            userId: '105',
                            nickname: '悟空',
                            avatar: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
                            description: '',
                            isFollowed: false,
                            isBusiness: false,
                            stats: {
                                posts: 65,
                                followers: 2341
                            }
                        },
                        {
                            userId: '106',
                            nickname: 'momo',
                            avatar: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
                            description: '还没有简介',
                            isFollowed: false,
                            isBusiness: false,
                            stats: {
                                posts: 12,
                                followers: 456
                            }
                        },
                        {
                            userId: '107',
                            nickname: '花叔（只工作不上班版',
                            avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                            description: '5篇笔记未看',
                            isFollowed: true,
                            isBusiness: true,
                            stats: {
                                posts: 89,
                                followers: 5432
                            }
                        }
                    ]

                    this.followingList = mockData
                    this.hasMore = false
                    this.loading = false
                }, 500)
            } catch (error) {
                console.error('获取关注列表失败:', error)
                this.$toast.fail('获取关注列表失败')
                this.loading = false
            }
        },

        // 切换关注状态
        toggleFollow(user) {
            user.isFollowed = !user.isFollowed

            // 调用API更新关注状态
            if (user.isFollowed) {
                // 关注用户
                this.$store.dispatch('toggleFollowUser', user.userId)
                this.$toast.success('已关注')
            } else {
                // 取消关注
                this.$store.dispatch('toggleFollowUser', user.userId)
                this.$toast.success('已取消关注')
            }
        },

        // 设置筛选条件
        setFilter(filter) {
            this.activeFilter = filter
        },

        // 跳转到用户主页
        goToUserProfile(userId) {
            this.$router.push(`/user/${userId}`)
        }
    }
}
</script>

<style scoped>
.follows-container {
    min-height: 100vh;
    background-color: #f7f8fa;
}

.tab-header {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.tab-item {
    position: relative;
    padding: 0 8px;
    font-size: 15px;
    color: #666;
}

.tab-item.active {
    color: #333;
    font-weight: 500;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background-color: #fe4f70;
    border-radius: 1px;
}

.search-box {
    padding: 8px 16px;
    background-color: #f7f8fa;
}

.filter-tabs {
    padding: 0 16px;
    background-color: #fff;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    border-bottom: 1px solid #f5f5f5;
}

.filter-left {
    display: flex;
}

.filter-item {
    margin-right: 16px;
    font-size: 14px;
    color: #666;
}

.filter-item.active {
    color: #333;
    font-weight: 500;
}

.filter-right {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
}

.filter-right span {
    margin-right: 4px;
}

.follows-list {
    padding: 0 16px;
    background-color: #fff;
}

.follow-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f5f5f5;
}

.user-avatar {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-info {
    flex: 1;
    overflow: hidden;
}

.user-name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-desc {
    font-size: 13px;
    color: #999;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-stats {
    font-size: 12px;
    color: #999;
}

.stat-divider {
    margin: 0 6px;
}

.follow-action {
    margin-left: 12px;
}

.follow-btn {
    min-width: 64px;
    font-size: 13px;
}

.followed-btn {
    min-width: 64px;
    font-size: 13px;
    color: #666;
    background-color: #f5f5f5;
    border: none;
}

.load-more {
    display: flex;
    justify-content: center;
    padding: 16px 0;
    color: #999;
}

.empty-list {
    padding: 40px 0;
}
</style>